import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import big from '@/assets/images/home/xiaolang.png';
import './home.less';
import { useEffect, useState } from 'react';
import { HomePageApi } from '@/api';
import SubjectItem from '@/components/SubjectItem';

interface IHomeData {
  title: string;
  collect: number;
  study: number;
  wrong: number;
  total: number;
  subjects: IExamModel[];
}

// 定义一个自定义hook把首页的数据抽离出来
function useHomeData(): [IHomeData, () => void] {
  // 定义页面所需的数据
  const [title, setTitle] = useState('');
  const [collect, setCollect] = useState(0);
  const [study, setStudy] = useState(0);
  const [wrong, setWrong] = useState(0);
  const [total, setTotal] = useState(0);
  // 当前设置的大学科下面的每个小的题目分类
  const [subjects, setSubjects] = useState<IExamModel[]>([]); // useState可以传递泛型，用来约定 前面的数据的类型

  function getHomeData() {
    // 首页的数据，可能在长时间内，是不需要重新发请求的，我们为优化性能，做一次缓存，如果需获取数据，先判断缓存里面有没有，如果有直接从缓存里面获取，如果没有再请求
    // 但是如果做 切换学科的 功能， 需要在点击确定切换的时候，把 缓存清掉，因为两边的数据是不一样的了
    let homeData = sessionStorage.getItem('homedata');
    // 1. 判断 sessionStorage里面是否有数据
    if (homeData) {
      // 4. 如果存在，就直接从 sessionStorage 里面取
      const data = JSON.parse(homeData) as IHomeDataModel;
      setTitle(data.exam.title);
      setCollect(data.collect);
      setStudy(data.study);
      setWrong(data.wrong);
      setTotal(data.exam.itemCount);
      setSubjects(data.exemItems);
    } else {
      // 2. 没有数据 向服务器发请求
      HomePageApi().then((res) => {
        if (res.errCode === 0) {
          // 更新数据
          setTitle(res.data.exam.title);
          setCollect(res.data.collect);
          setStudy(res.data.study);
          setWrong(res.data.wrong);
          setTotal(res.data.exam.itemCount);
          setSubjects(res.data.exemItems);
          // 3. 把请求回来的数据存到 sessionStorage
          sessionStorage.setItem('homedata', JSON.stringify(res.data));
        }
      });
    }
  }

  // 把首页的数据请求回来 -- 因为我们不用再次获取这个数据，可以把请求也一并写入自定义hook，但是如果将来是做分页 ， 就要把请求的过程封装好，导出
  useEffect(() => {
    getHomeData();
  }, []);

  const homeData: IHomeData = { title, collect, study, wrong, total, subjects };

  return [homeData, getHomeData];
}

export default function Home() {
  const [homeData, getHomeData] = useHomeData();

  return (
    <div className="home">
      <section className="subjects">
        <h2 className="sub-name">{homeData.title}</h2>
        <div className="change">
          <span>切换学科</span>
          <ArrowRightIcon />
        </div>
      </section>
      <section className="wel">
        <p>欢迎Tomato来到XX学习库！</p>
        <div className="wel-bt">
          <img src={big} alt="" />
          <section>
            <section>
              已学{homeData.study}题<span className="space">|</span>共
              {homeData.total}题
            </section>
            <section style={{ display: 'flex' }}>
              <ul>
                <li>{homeData.wrong}</li>
                <li>错题</li>
              </ul>
              <ul>
                <li>{homeData.collect}</li>
                <li>收藏</li>
              </ul>
            </section>
          </section>
        </div>
      </section>
      <section className="adv"></section>
      <section className="lib">
        <h2>学科题库</h2>
        <div>
          {homeData.subjects.map((item) => (
            <SubjectItem data={item} key={item.id} />
          ))}
        </div>
      </section>
    </div>
  );
}
